
<!-- 典型案件收藏 -->
<template>
  <div class="typical_case_box"> 

    <a-modal  v-model="isShowModal" width="650px" :bodyStyle="{ height: '475px', overflow: 'auto', zIndex:9999}"  title="案件收藏" destroyOnClose>
      
      <a-form-model   ref="ha_taskForm" :rules="rules" :model="infoForm">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="申请人" prop="applyname" has-feedback>
          <a-input v-model="infoForm.applyname" placeholder="请输入申请人" />
        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="被申请人" prop="targetname" has-feedback>
          <a-input v-model="infoForm.targetname" placeholder="请输入被申请人" />
        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="案由" prop="casecause" has-feedback>
          <a-textarea v-model="infoForm.casecause" allow-clear :maxLength="3000" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入案由" ></a-textarea>
        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="分类标签" prop="classify" has-feedback>
          <a-select mode="tags" v-model="infoForm.classify"  style="width: 100%" placeholder="请选择分类标签，输入可新增" @change="typicalChange">
            <a-select-option v-for="typical in typicalEnums" :key="typical.name" >
              {{ typical.name }}
            </a-select-option>
          </a-select>

        </a-form-model-item>

        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="备注" prop="remarks" has-feedback>
          <a-textarea  v-model="infoForm.remarks" allow-clear :maxLength="3000" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入备注" ></a-textarea>
        </a-form-model-item>

      </a-form-model> 

      <div slot="footer" class="typical_case_box_footer">
        <a-button class="cancle_button" @click="() => isShowModal=false"><span class="cancle_button_span">取消</span></a-button>
        <a-button class="ok_button" @click="saveTypical"><span class="ok_button_span">确定</span></a-button>
      </div>
    </a-modal>

  </div>

</template>

<script>
import { getAdmirePersonInfo } from '@/api/accept/apl_admreview.js'
import { getTypicalEnums, saveTypicalEnums, saveTypical } from '@/api/accept/apl_typicial.js'
import { nanoid } from 'nanoid'
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
export default {
  props: {
    applyid: {
      type: String,
      required: true,
    },
    typicalCase: {
      type: Object,
      required: false,
    }
  },
  data() {
    return {
      isShowModal: false,
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 20 }, // 组件宽
      infoForm: {
        applyname: undefined, // 申请人
        targetname: undefined, // 被申请人
        casecause: undefined, // 案由
        classify: undefined, // 分类
        remarks: undefined // 备注
      },
      admireData: {},
      rules: {
        applyname: [
          { required: true, message: '请输入申请人', trigger: 'blur' },
          { max: 100, message: '长度不能超过100', trigger: 'blur' },
        ],
        targetname:  [
          { required: true, message: '请输入被申请人', trigger: 'blur' },
          { max: 100, message: '长度不能超过100', trigger: 'blur' },
        ],
        casecause:  [
          { required: true, message: '请输入案由', trigger: 'blur' },
          { max: 3000, message: '长度不能超过3000', trigger: 'blur' },
        ],
        classify: [{ required: true, message: '请选择分类', trigger: 'change' }],
        remarks:  [
          { required: true, message: '请输入备注', trigger: 'blur' },
          { max: 100, message: '长度不能超过100', trigger: 'blur' },
        ]
      },
      typicalEnums: [],
      selectTypical: [],
      currentUser: storage.get(APP_USER), // 登录人信息
    }
  },
  created() {
    this.queryAdmreview()
    this.getTypicalEnums()
  },
  methods: {
    init() {
      this.getTypicalEnums()
      this.isShowModal = true
      if (this.typicalCase) {
        this.infoForm.casecause = this.typicalCase.casecause // 案由
        this.infoForm.classify = this.typicalCase.classify // 分类
        this.infoForm.remarks = this.typicalCase.remarks // 备注 
      }
    },
    async queryAdmreview() {
      let res = await getAdmirePersonInfo({applyid: this.applyid})
      if (res.code == 0) {
        console.log("查询成功")
        this.admireData = res.data.admreview;
        this.infoForm.applyname = this.admireData.applyname
        this.infoForm.targetname = this.admireData.targetname
        this.infoForm.casecause = this.admireData.reason
      } else {
        this.$message.error('查询失败')
      }
    },
    async getTypicalEnums() {
      let res = await getTypicalEnums()
      if (res.code !== 0) {
        this.$message.error('查询分类失败')
      } else {
        this.typicalEnums = res.data
      }
    },
    typicalChange(val) {
      this.selectTypical = val
      this.infoForm.classify = this.selectTypical.join(",")
    },
    
    saveTypical() {
      this.infoForm.applyid = this.applyid
      this.infoForm.id = nanoid()
      this.infoForm.createuserid = this.currentUser.userId
      this.infoForm.createusername = this.currentUser.fullname
      this.infoForm.createusertime = new Date()
      saveTypical(this.infoForm).then((res) => {
        if (res.code !== 0) {
          this.$message.error('保存失败')
        } else {
          // 保存新增的分类
          let newTypicals =[]
          for (let index in this.selectTypical) {
            if (!this.typicalEnums.some(element => element.name == this.selectTypical[index])) {
              newTypicals.push(this.selectTypical[index])
            }
          }
          if (newTypicals && newTypicals.length > 0) {
            // 保存
            saveTypicalEnums(newTypicals).then((res) => {
              if (res.code !== 0) {
                console.log("新增分类失败")
              } else {
                console.log("新增分类成功")
              }
            })
          }
          this.isShowModal = false
        }
      })
    }

  }
}
</script>

<style lang="less" scoped>

::v-deep .ant-model {
  z-index: 10000;
}
::v-deep .ant-modal-content {
  background: #FFFFFF;
  border-radius: 12px;
}
::v-deep .ant-modal-header {
  background: #F3F4F8;
  border-radius: 12px;
}
::v-deep .ant-modal-title {
  font-weight: 600;
  color: #2C2C2C;
  font-size: 16px;
}

::v-deep .ant-form-item-label {
  font-size: 16px;
  font-family: "PingFang-SC-Heavy";
  font-weight: 800;
  color: #2C2C2C;
}


.typical_case_box_footer {
  > span {
    font-size: 16px;
    font-family: "PingFang-SC-Heavy";
    font-weight: 800;
  }
  .cancle_button {
    width: 100px;
    margin-right: 20px;
    height: 34px;

    .cancle_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 800;
      color: #666666;
      letter-spacing: 0em;
      margin-right: 0em;

    }
  }

  .ok_button {
    width: 100px;
    background: #0072C6;
    height: 34px;
    
    .ok_button_span {
      font-size: 16px;
      font-family: "PingFang-SC-Heavy";
      font-weight: 800;
      color: #FFFFFF;
      letter-spacing: 0em;
      margin-right: 0em;
    }
  }
}

</style>